<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个入口函数时的覆盖问题的验证过程</title>
    <script type="text/javascript" src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<img src="https://img.alicdn.com/tfs/TB1GFcBtrH1gK0jSZFwXXc7aXXa-190-121.gif" />
</body>

<script>

    /*
    功能:
        测试入口函数被覆盖时的执行过程.
    输出:
        jquery的入口函数-获取img标签中远程图片的宽度(使用原生js): 190px
        jquery的入口函数获取img标签中远程图片的宽度(使用jquery): 190
        jquery的入口函数-覆盖测试
        js入口函数-覆盖测试
    说明:
        1. 从输出结果中可以发现:
            - 原生js的入口函数被覆盖时, 只会执行最后一个入口函数;
            - jquery的入口函数被覆盖时, 两个入口函数都会被执行;
    */

    //js入口函数
    window.onload = function () {
        console.log("js入口函数-获取img标签中远程图片的宽度(使用原生js):", getImageWidth());
        console.log("js入口函数-获取img标签中远程图片的宽度(使用jquery):", getImageWidthUseJquery());
    };

    window.onload = function () {
        console.log("js入口函数-覆盖测试");
    };

    //jquery的入口函数
    $(document).ready(function () {
        console.log("jquery的入口函数-获取img标签中远程图片的宽度(使用原生js):", getImageWidth());
        console.log("jquery的入口函数获取img标签中远程图片的宽度(使用jquery):", getImageWidthUseJquery());
    });

    $(document).ready(function () {
        console.log("jquery的入口函数-覆盖测试");
    });

    /**
     * 功能:
     *      使用原生js方式获取页面元素.
     * 生产:
     *      通过浏览器查看.
     */
    function getImageWidth() {
        const img = document.getElementsByTagName("img")[0];
        const imgWidth = window.getComputedStyle(img).width;

        return imgWidth;
    }

    function getImageWidthUseJquery() {
        const img = $("img");
        const imgWidth = img.width();

        return imgWidth;
    }
</script>

</html>